<template>
  <input ref="input" />
  学生列表：
  <ul>
    <li v-for="item in list" :key="item.no" ref="stulist">{{ item.name }} - {{ item.age}}</li>
  </ul>
  <hr />
  <ChildFirst ref="ChildFirst" />
  <hr />
  <child-first ref="child" ></child-first>
  <hr />
  <BlogPost v-for="post in posts" :key="post.id" :title="post.title" />
  <hr />
  <BlogPost @enlarge-text="fun"  title="这是emit" ></BlogPost>
</template>
<script>
import ChildFirst from '../../components/child.vue'
import BlogPost from '../../components/blog-post.vue'

export default {
  components: { ChildFirst, BlogPost: BlogPost },
  data() {
    return {
      list: [{no:1, name:'张三', age: 18},
      {no:2, name:'李四', age: 20},
      {no:3, name:'王五', age: 22}],
      posts: [
        { id: 1, title: 'My journey with Vue' },
        { id: 2, title: 'Blogging with Vue' },
        { id: 3, title: 'Why Vue is so fun' }
      ]
    }
  },
  methods: {
    fun(content) {
      console.info('父组件调用子组件的方法', content)
    },
    focus() {
      // 调用 refs 聚焦输入框
      this.$refs.input.focus()
    }
  },
  mounted() {
    // 初始化时聚焦输入框
    this.$refs.input.focus()
    console.info(this.$refs.stulist)
    // 获取子组件的属性 侵入性太强, 不推荐使用.   推荐用props、$emit进行传值
    console.info(this.$refs.child, this.$refs.child.message)
  }
}
</script>